<template>
    <div id="app">
        <h1 v-bind:class="cssArray">{{ msg }}</h1>
        <button v-on:click="changeColor">换色</button>
        <ul>
            <li v-for="person in personArr" v-bind:key="person">
                {{ person }}
            </li>
        </ul>
        <button @click="sortArr">Sort</button>
        <button @click="reverseArr">Reverse</button>
        <h1>{{ match }}</h1>
    </div>
</template>

<script>
    export default {
        name: "Fst03",
        data:function () {
            return{
            msg:'Hello ,Vue',
            cssArray:['bold','green'],
            personArr:['张三','李四','王五五','赵六子儿','abcd12340']
            }
        }
        ,
        methods:{
            changeColor(){
            if(this.cssArray[1]!=='green'){
                this.cssArray.pop();
                this.cssArray.push('green');
                }
            else{
                this.cssArray.pop();
                this.cssArray.push('yellow');
                }
            },
            sortArr(){
                this.personArr.sort(function (a,b) {
                    return b.length-a.length;
                })
            },
            reverseArr(){
                this.personArr.reverse();
            }
        },
        computed:{
            match(){
                return this.personArr.filter(function (value) {
                    return value.match(/c/);
                })
            }
        }
    }
</script>

<style scoped>
.green{
    color:green;
}
.yellow{
    color: yellow;
}
.bold{
    font-size: 40px;
    font-weight: bolder;
}
</style>